<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>我的家乡</title>

    <!-- 引入百度地图api -->
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=3.0&type=webgl&ak=c5R7LOBg0sONrK0XBAdT4PJAgEwzfqoK"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=c5R7LOBg0sONrK0XBAdT4PJAgEwzfqoK"></script>
    <script src="//bj.bcebos.com/v1/mapopen/api-demos/js/mapStyle.js"></script>
    <script type="text/javascript"
        src="//mapopen.cdn.bcebos.com/github/BMapGLLib/AreaRestriction/src/AreaRestriction.min.js"></script>
    <script type="text/javascript" src="//bj.bcebos.com/v1/mapopen/github/BMapGLLib/Lushu/src/Lushu.min.js"></script>
    <script type="text/javascript"
        src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <!-- <link rel="stylesheet" href="css/animate.min.css"> -->
    <link rel="stylesheet" href="css/map.css">


</head>

<body>
    <div class="wrap">
        <div class="header">
            <div class="content">
                <div class="header-left">
                    <a href="map.html">
                        <h3 style="color: rgb(62, 135, 218);">我的家乡</h3>
                    </a>
                </div>
                <div class="header-mid">
                    <ul id="nav" class="animated fadeInLeft">
                        <li><a href="index.html"><span>首页</span></a></li>
                        <li><a href="food.html"><span>美食</span></a></li>
                        <li><a href="scenery.html"><span>景点</span></a></li>
                        <li><a href="custom.html"><span>民俗</span></a></li>
                    </ul>
                </div>
                <div class="header-right">
                    <a href="https://www.cnbz.gov.cn/zjbz/index.html"><button>Welcome</button></a>
                </div>
            </div>
        </div>
    </div>
    <!-- 地图容器 -->
    <!-- <div id="container"></div> -->
    <div class="wrapper1">
        <!-- Sidebar  -->
        <nav id="sidebar" class="active">
            <div class="sidebar-header">
                <h3>导航栏</h3>
            </div>
            <ul class="list-unstyled components" id="functionul">
                <li class="canclicked functionli1">
                    <a id="foodlayer">美食图层</a>
                </li>
                <li class="canclicked functionli1">
                    <a id="viewlayer">风景图层</a>
                </li>
                <li class="canclicked functionli1">
                    <a id="prismlayer">棱柱体</a>
                </li>
                <li class="functionli1">
                    <a data-toggle="collapse" class="dropdown-toggle">天气</a>
                    <ul class="collapse list-unstyled" id="climatelayer">
                        <li>
                            <a class="canclicked" href="http://www.nmc.cn/publish/forecast/ASC/bazhong.html">天气预览</a>
                        </li>
                        <li>
                            <a class="canclicked" id="climategif">实时天气</a>
                        </li>
                    </ul>
                </li>
                <li class="canclicked functionli1">
                    <a id="citylayer">行政区图层</a>
                </li>
                <li class="functionli1">
                    <a data-toggle="collapse" class="dropdown-toggle">区域查询</a>
                    <ul class="collapse list-unstyled" id="queryul1">
                        <li>
                            <a class="canclicked" id="keyquery">关键字查询</a>
                        </li>
                        <li>
                            <a class="canclicked" id="areaquery">矩形区域查询</a>
                        </li>
                    </ul>
                </li>
                <li class="functionli1">
                    <a data-toggle="collapse" class="dropdown-toggle">路线查询</a>
                    <ul class="collapse list-unstyled" id="queryul2">
                        <li>
                            <a class="canclicked" id="driveroutequery">驾车路线查询</a>
                        </li>
                        <li>
                            <a class="canclicked" id="busroutequery">公交路线查询</a>
                        </li>
                        <li>
                            <a class="canclicked" id="walkroutequry">步行路线查询</a>
                        </li>
                        <li>
                            <a class="canclicked" id="cycleroutequery">骑行路线查询</a>
                        </li>
                        <li>
                            <a class="canclicked" id="addpathsituation">路况查询</a>
                        </li>
                    </ul>
                </li>
                <li class="canclicked functionli1">
                    <a id="clearcontrol">清除</a>
                </li>
            </ul>
        </nav>

        <!-- Page Content  -->
        <div id="content">
            <button id="sidebarCollapse">
            </button>
            <div id="container"></div>
        </div>
        <!-- 地图js -->
        <script src="js/initmap.js"></script>
        <!-- 控件js -->
        <script src="js/control.js"></script>
</body>

</html>